<template>
    <div class="content">
        <div class="left">
            <ul>
                <li>支付方式 {{count}}</li>
            </ul>
            <el-form ref="form" :model="form" label-width="200px">
                <el-form-item>
                    <img src="../images/支付宝.png" width="36px" alt="" slot="label">
                    <div slot="label">支付宝</div>
                    <el-input v-model="form.alipay" @focus="bb('alipay')" ></el-input>
                </el-form-item>
                <el-form-item>
                    <img src="../images/微信.png" width="36px" alt="" slot="label">
                    <div slot="label">微信</div>
                    <el-input v-model="form.weChat" @focus="bb('weChat')"></el-input>
                </el-form-item>
                <el-form-item>
                    <img src="../images/现金.png" width="36px" alt="" slot="label">
                    <div slot="label">现金</div>
                    <el-input v-model="form.cash" @focus="bb('cash')"></el-input>
                </el-form-item>
                <el-form-item>
                    <img src="../images/余额.png" width="36px" alt="" slot="label">
                    <div slot="label">余额</div>
                    <el-input v-model="form.balance" @focus="bb('balance')"></el-input>
                </el-form-item>
                <el-form-item>
                    <img src="../images/银行卡.png" width="36px" alt="" slot="label">
                    <div slot="label">银行卡</div>
                    <el-input v-model="form.bankCard"  @focus="bb('bankCard')"></el-input>
                </el-form-item>

            </el-form>
        </div>
        <div class="right">
            <div class="r-head">
                <div class="text">
                    <span>应收</span> <span>实收</span> <span>找零</span>
                </div>
                <div class="price">
                    <span class="orange">￥{{details[0].totalorderPrice}}</span> <span>￥{{details[0].totalorderPrice}} </span> <span>0</span>
                </div>
            </div>
            <div class="r-content">
                <div class="r-l">
                    <button v-for="item in num" :key="item"  @click="aa(item)">{{item}}</button>
                </div>
                <div class="r-r">
                    <button class="blue" @click="linkto(details[0].id)">完成</button>
                    <button>取消</button>
                </div>
            </div>
        </div>
        <!-- {{details[0]}}123 -->
    </div>
    
</template>

<script>
 import { createNamespacedHelpers } from 'vuex'
 const {mapState,mapActions} = createNamespacedHelpers('order')
    export default {
        data() {
            return {
                form: {
                    alipay:'',
                    weChat:'',
                    cash:'',
                    balance:'',
                    bankCard:''

                },
                payType: 'alipay',
                receivable: '213',
                paidIn: '250',
                change: '37',
                num:[7,8,9,'x', 4,5,6,'50', 1,2,3,'150',100,200,300,'250',],
                count:'',
                zhifu:20
            }
        },
        computed:{
               ...mapState(['details']),
        },
        methods:{
                ...mapActions(['settlement']),
            aa(num){
                if(num=='x'){
                    this.form[this.payType]='';
                }else{
                    this.form[this.payType] += num
                }
            },
            bb(type){
                if(type=='alipay'){
                    return
                }
                this.payType=type
            },
            linkto(id){
                this.settlement(id)
                this.$router.push('orderList')
                
            }
        }
    }
</script>

<style lang="scss" scoped src="../css/patmentMethod.scss"></style>